@import '~mand-mobile/components/_style/mixin/util';
@import '~mand-mobile/components/_style/mixin/theme';
@import '~nib/lib/nib/vendor';
@import '~nib/lib/nib/gradients';

/*
 * global color
 */
theme-color = #FF6917;
// brand color
color-primary = #FF6917; // 1st main color for buttons & highlight text which is not clickable
color-primary-tap = #FF6917; // 2nd main color for links and selected element
color-primary-background = #EFEFEF; // 3rd main color for background
// text color
color-text-base = #333; // default text color
color-text-base-inverse = #fff; // default inverse text color
color-text-minor = #666; // auxiliary text color
color-text-caption = #999; // subtitle and describe text  color
color-text-disabled = #ccc; // input placeholder
color-text-placeholder = #999; // input placeholder
color-text-highlight = color-primary; // hight text color
color-text-link = color-primary; // link text color
// border color
color-border-base = #e0e0e0; // defalut gap color of items
color-border-minor = #ebebeb; // gap color of items
color-border-element = #999; // border color of element such as button
// background color
color-bg-base = #fff; // default background color
color-bg-disabled = #C6C6C6; // background color for disabeld element
color-bg-mask = rgba(0, 0, 0, 0.4); // background color for mask layer
color-bg-tap = rgba(0, 0, 0, 0.08); // background color for element click state
color-bg-tap-highlight = rgba(252, 145, 83, 0.08); // background color for highlight element click state
/*
 * global size
 */
font-heading-large = 42px;
font-heading-medium = 36px;
font-heading-normal = 32px;
font-body-large = 30px;
font-body-normal = 28px;
font-minor-large = 24px;
font-minor-normal = 20px;
font-weight-normal = 400;
font-weight-medium = 500;
font-weight-bold = 600;
// radius size
radius-normal = 10px;
radius-circle = 50%;
// border size
border-width-base = 2px;
// gap size
h-gap-sm = 12px;
h-gap-md = 20px;
h-gap-lg = 32px;
v-gap-sm = 12px;
v-gap-md = 20px;
v-gap-lg = 32px;
// toast
toast-fill = rgba(0, 0, 0, 0.5);
// opacity
opacity-disabled = 0.4; // opacity of disabled button, switch, agree
// button
button-primary-fill = color-primary;
button-primary-fill-disabled = color-bg-disabled;
button-primary-fill-tap = color-bg-tap;
button-primary-width = 100%;
button-primary-height = 98px;
button-primary-font-size = font-heading-medium;
button-primary-font-weight = font-weight-medium;
button-primary-radius = radius-normal;
button-ghost-fill = color-bg-base;
button-ghost-fill-tap = color-bg-tap;
button-ghost-primary-fill-tap = color-bg-tap-highlight;
button-ghost-width = 160px;
button-ghost-height = 60px;
button-ghost-width-sm = 130px;
button-ghost-height-sm = 50px;
button-ghost-font-size = 24px;
button-ghost-color = color-border-element;
button-ghost-primary-color = color-primary;
button-ghost-radius = 20px;
// tabs
tab-color = color-primary-tap;
tab-font-size = font-body-normal;
tab-text-color = color-text-base;
tab-bg = color-bg-base;
tab-border-color = color-border-minor;
tab-height = 88px;
tab-ink-bar-height = 4px;
tab-zindex = 101;
// field
field-padding = h-gap-lg;
field-padding-h = 30px;
field-padding-v = 24px;
field-title-color = color-text-base;
field-title-font-size = font-body-large;
field-title-font-weight = font-weight-medium;
field-title-margin = 26px;
field-item-padding-v = 18px;
field-item-bg-color = color-bg-base;
field-item-bg-tap-color = color-bg-tap;
field-item-color = color-text-base;
field-item-font-size = font-body-large;
field-item-icon-color = #ccc;
field-item-border-color = color-border-minor;
field-item-color-disabled = opacity-disabled;
field-item-brief-font-size = font-minor-large;
field-item-brief-color = color-text-caption;
// dialog
dialog-width = 534px;
dialog-radius = 10px;
dialog-title-font-size = font-heading-normal;
dialog-title-color = color-text-base;
dialog-text-font-size = font-body-normal;
dialog-text-color = color-text-minor;
dialog-action-height = 100px;
dialog-action-font-size = font-heading-normal;
dialog-action-border-color = color-border-base;
dialog-close-color = color-text-caption;
dialog-action-highlight-color = color-primary;
dialog-icon-size = 100px;
dialog-icon-fill = color-text-caption;
dialog-zindex = 1402;
// popup
popup-title-bar-bg = color-bg-base;
popup-title-bar-border-color = color-border-base;
popup-title-bar-height = 110px;
popup-title-bar-font-size-button = font-body-normal;
popup-title-bar-font-size-title = font-heading-medium;
popup-title-bar-color-title = color-text-base;
popup-title-bar-color-button-left = color-text-minor;
popup-title-bar-color-button-right = color-text-highlight;
popup-mask-bg = rgba(0, 0, 0, 0.4);
popup-zindex = 1000;

.stepper {
    .title {
        font-size: 44px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 48px;
        margin-bottom: 20px;
    }

    .desc {
        font-size: 24px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 24px;
        margin-bottom: 188px;
    }
}

.amap-marker-label {
    border: 0px;
    border-radius: 6px;
}

.md-field-item .md-field-item-content.right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    color: #999;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.around {
    justify-content: space-around;
}

.between {
    justify-content: space-between;
}

.end {
    align-items: flex-end;
}

.xy-center {
    align-items: middle;
    justify-content: center;
}

.centered {
    align-items: center;
}

.mx-2 {
    margin: 0px 20px;
}

.my-1 {
    margin: 10px 0px;
}

.my-2 {
    margin: 20px 0px;
}

.ml-2 {
    margin-left: 20px;
}

.ml-1 {
    margin-left: 10px;
}

.mr-2 {
    margin-right: 20px;
}

.mr-1 {
    margin-right: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-1 {
    margin-top: 10px;
}

.map-location-name {
    font-size: 26px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
}

.map-partner-name {
    font-size: 20px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
}

.map-location {
    font-size: 26px;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
}

.with_shadow {
    box-shadow: 0px 2px 8px 0px rgba(191, 191, 191, 0.5);
}
